<template>
  <up-navbar title="积分商城" placeholder :autoBack="true" bgColor="unset" left-icon-color="#fff"
    :titleStyle="{color:'#fff'}">
  </up-navbar>
  <image src="@/static/images/01_bj.png" class="banner-image" mode=""></image>
  <view class="home">
    <view class="rules-box" @click="$u.route('/pages/index/agreement?type=1')">积分规则</view>
    <view class="integral-num u-text-center">{{user_score}}</view>
    <view class="integral-text u-text-center">账户积分</view>
    <view class="integral-menu u-m-t-30">
      <u-row gutter="30">
        <u-col span="3">
          <view class="menu-item" @click="$u.route('/pages/index/integralShop/integralRecord')">
            <image src="@/static/images/01_20fg.png" mode=""></image>
            <view>兑换记录</view>
          </view>
        </u-col>
        <u-col span="3">
          <view class="menu-item" @click="$u.route('/pages/index/integralShop/integralList')">
            <image src="@/static/images/01_20y.png" mode=""></image>
            <view>积分明细</view>
          </view>
        </u-col>
        <u-col span="3">
          <view class="menu-item" @click="$u.route('/pages/index/integralShop/addressList')">
            <image src="@/static/images/01_20dfb.png" mode=""></image>
            <view>收货地址</view>
          </view>
        </u-col>
        <u-col span="3">
          <view class="menu-item" @click="handleSign">
            <image src="@/static/images/01_20dser.png" mode=""></image>
            <view>每日打卡</view>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="shop-title">积分兑换</view>
    <view class="u-flex-y-center u-flex-between u-flex-wrap">
      <block v-for="(item,index) in list" :key="item.id">
        <shop-item :item="item"></shop-item>
      </block>
    </view>
  </view>
  <sign-item :show="show" @update:show="show = $event" @successConfirm="user_score++"></sign-item>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import shopItem from '../components/shop-item.vue';
  import signItem from '@/components/sign-item/sign-item.vue'
  import { onReachBottom } from "@dcloudio/uni-app"
  import { productList,luck_config } from '../../../config/api';

  const params = ref({
    page: 1,
    limit: 15
  })
  const show = ref(false)
  const list = ref([])
  const user_score = ref('')
  onMounted(() => {
    _productList()
    _luck_config()
  })
  onReachBottom(() => {
    params.value.page++
    _productList()
  })
  //信息
  const _luck_config = () => {
    luck_config().then(res => {
      user_score.value = res.data.user_score
    })
  }
  // 商品列表
  const _productList = () => {
    productList(params.value).then(res => {
      if (params.value.page == 1) list.value = res.data.data
      else list.value = list.value.concat(res.data.data)
    })
  }
  const handleSign = () => {
    show.value = true
  }
</script>

<style lang="scss" scoped>
  .banner-image {
    width: 100%;
    height: 460rpx;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .home {
    z-index: 2;
    position: relative;
    padding: 0 20rpx;
    padding-top: 50rpx;

    .rules-box {
      width: 142rpx;
      height: 46rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 24rpx 0rpx 0rpx 24rpx;
      border: 1rpx solid #FFFFFF;
      position: absolute;
      right: 0;
      top: 20rpx;
      text-align: center;
      line-height: 46rpx;
      font-size: 24rpx;
      color: #FFFFFF;
    }

    .integral-num {
      font-size: 56rpx;
      font-weight: 500;
      color: #fff;
    }

    .integral-text {
      font-size: 26rpx;
      font-weight: 500;
      color: #FFFFFF;
      margin-top: 20rpx;
    }

    .integral-menu {
      height: 162rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 26rpx;

      .menu-item {
        font-size: 28rpx;
        font-weight: 500;
        color: #000;
        margin: auto;
        text-align: center;


        image {
          width: 48rpx;
          height: 48rpx;
          margin-bottom: 15rpx;
        }
      }
    }

    .shop-title {
      font-size: 30rpx;
      font-weight: 800;
      color: #000;
      margin-top: 20rpx;
    }
  }
</style>